<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pixi learn 5</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
      background: blue;
    }
  </style>
</head>
<body>
<!--<canvas id="mycanvas"></canvas>-->
<script src="../lib/pixi.js"></script>
<script type="text/javascript">
  // const canvas = document.getElementById('mycanvas')
  // const app = new PIXI.Application({
  //   view: canvas,
  //   width: window.innerWidth,
  //   height: window.innerHeight
  // })

  // Create the application helper and add its render target to the page
  const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight });
  document.body.appendChild(app.view);

  // Add a container to center our sprite stack on the page
  const container = new PIXI.Container();
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;
  app.stage.addChild(container);

  // Create the 3 sprites, each a child of the last
  const sprites = [];
  let parent = container;
  for (let i = 0; i < 3; i++) {
    let sprite = PIXI.Sprite.from('../assets/bunny.png');
    sprite.anchor.set(0.5);
    parent.addChild(sprite);
    sprites.push(sprite);
    parent = sprite;
  }

  // Set all sprite's properties to the same value, animated over time
  let elapsed = 0.0;
  app.ticker.add((delta) => {
    elapsed += delta / 60;
    const amount = Math.sin(elapsed);
    const scale = 1.0 + 0.25 * amount;
    const alpha = 0.75 + 0.25 * amount;
    const angle = 40 * amount;
    const x = 75 * amount;
    for (let i = 0; i < sprites.length; i++) {
      const sprite = sprites[i];
      sprite.scale.set(scale);
      sprite.alpha = alpha;
      sprite.angle = angle;
      sprite.x = x;
    }
  });


</script>
</body>
</html>
